<template>
  <div class="">
    <div class="wrap book">
      <div class="flag">
        <img src="static/img/img-flag.png" alt="">
      </div>
      <div class="top">
        <p class="title-main">免费上门试课</p>
        <timecounter></timecounter>
      </div>
      <div class="book-box">
        <div class="book-content">
          <!-- <divinput v-model="phoneNumber"></divinput> -->
          <p class="phone-num">
            <input type="text" v-model='phoneNumber' placeholder="请输入手机号" @focus="focus" @blur="blur">
          </p>
          <p class="btn">
            <span @click="book">立即预约</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import divinput from '@/components/divinput.vue'
import Bus from '../../static/js/bus.js'
import timecounter from '@/components/timeCounter.vue'
export default {
  data() {
    return {
      phoneNumber: '',
      hours: '',
      minute: '',
      custom: ''
    }
  },
  created(){
    this.custom = this.getCookie('custom');
  },
  mounted() {
  	var _this = this;
  	_this.timeCounter();
  	var time = setInterval(function(){
  		_this.timeCounter()
  	},20000)
  },
  methods: {
    //获取cookie
    getCookie: function(cname) {
      var name = cname + "=";
      var ca = document.cookie.split(';');
      for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1);
        if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
      }
      return "";
    },
    book: function() {
      var flag = true;
      if (this.phoneNumber == "") {
        alert("请输入手机号");
        flag = false;
      } else if (!/^0?1[3|4|5|6|7|8]\d{9}$/.test(this.phoneNumber)) {
        alert("请输入正确的手机号");
        flag = false;
      }
      if (flag) {
        this.$axios({
          url: 'http://api.web.delijiajiao.com/marketing/consulation/submit',
          method: 'post',
          data: {
            phone: this.phoneNumber,
            custom: this.custom
          }
        }).then(function(data) {
          alert(data.data.msg)
        })
      }
    },
    timeCounter: function() {
      var mydate = new Date();
      var beginTime = mydate.getTime();
      var year = mydate.getFullYear();
      var month = mydate.getMonth() + 1;
      var date = mydate.getDate();

      var endTime = year + '-' + month + '-' + date + ' ' + '23:59:59';
      var endTimeMs = new Date(endTime).getTime();

      var remainTime = endTimeMs - beginTime;
      this.hours = parseInt(remainTime / (1000 * 60 * 60));
      this.minute = parseInt((remainTime % (1000 * 60 * 60)) / (1000 * 60));
      if(this.hours < 10) {
      	this.hours = '0' + this.hours;
      }
      if(this.minute < 10) {
      	this.mounted = '0' + this.minute;
      }
      // this.second = parseInt(remainTime % (1000 * 60) / 1000);
      // console.log(this.hours + ' ' + this.minute + ' ' + this.second)
    },
    focus: function(){
      Bus.$emit('changeToStatic')
    },
    blur: function(){
      Bus.$emit('changeToFixed')
    }
  },
  components: {
    // divinput,
  	timecounter
  }
}

</script>
<style scoped>
.book {
  background-color: #fff;
}

.book .flag {
  position: absolute;
  top: 0;
  left: 0;
  width: .5rem;
  height: .5rem;
  font-size: 0;
}

.book .top {
  padding-top: .36rem;
}

.book .top .title-main {
  font-family: '微软雅黑';
  font-size: .36rem;
  color: #545454;
  letter-spacing: 1px;
}

.book .top .title-sub {
  margin-top: .23rem;
  font-family: '微软雅黑';
  font-size: .26rem;
  color: #8b8a8a;
  letter-spacing: 1px;
}

.book .top .title-sub span {
  margin: 0 3px;
  width: .34rem;
  height: .34rem;
  border-radius: 4px;
  background-color: rgb(255, 99, 99);
  color: #fff;
  font-family: '微软雅黑';
  font-size: .26rem;
}

.book .book-box {
  height: 5rem;
  background: url('../../static/img/banner_02.png') no-repeat;
  background-size: contain;
  background-color: #f8f8f8;
}

.book .book-box .book-content {
  padding-top: .4rem;
  width: 5.7rem;
  margin: 0 auto;
}

.book .book-box .book-content .phone-num {
/*  position: relative;
  width: 100%;*/
/*  height: .9rem;
  line-height: .9rem;*/
  /*border: 1px solid #fead29;*/
/*  border-radius: .12rem;
  font-size: .32rem;
  color: #bebebe;*/
}

.book .book-box .book-content .phone-num input {
  display: inline-block;
  width: 100%;
  height: .9rem;
  line-height: .9rem;
  outline: none;
  border: 1px solid #fead29 !important;
  border-radius: .12rem;
  text-align: center;
  font-size: .32rem;
}

/*.book .book-box .book-content .phone-num input::-webkit-input-placeholder {
  font-family: '微软雅黑';
  font-size: .32rem;
  color: #bebebe;
}

.book .book-box .book-content .phone-num input:-moz-placeholder {
  font-family: '微软雅黑';
  font-size: .32rem;
  color: #bebebe;
}

.book .book-box .book-content .phone-num input::-moz-placeholder {
  font-family: '微软雅黑';
  font-size: .32rem;
  color: #bebebe;
}

.book .book-box .book-content .phone-num input:-ms-input-placeholder {
  font-family: '微软雅黑';
  font-size: .32rem;
  color: #bebebe;
}*/

.book .book-box .book-content .btn {
  margin-top: .4rem;
  width: 100%;
  height: .9rem;
  background-color: #fead29;
  border-radius: .12rem;
  font-size: .38rem;
  line-height: .9rem;
  color: #fff;
  font-family: '微软雅黑';
}

.book .book-box .book-content .btn span {
  /*height: .9rem;*/
}

</style>
